<template>
  <div :class="{'extend' : visible}" class="select-box-container">
    <div class="select-box-arrow" @click="toggle()">
      <svg-icon icon-class="cc-arrow-down-square" />
    </div>
    <div class="select-box-content">
      <slot />
    </div>
    <div class="select-box-extend">
      <slot name="extend" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'SelectBox',
  data() {
    return {
      visible: false,
      body: document.body
    }
  },
  mounted() {
  },
  methods: {
    toggle() {
      this.visible = !this.visible
      if (this.visible) this.bingBodyClick()
      else this.unBingBodyClick()
    },
    bingBodyClick() {
      this.body.onmouseup = (e) => {
        const allEl = this.getAllEl(this.$el, true)
        for (let i = 0; i < allEl.length; i++) {
          if (allEl[i] === e.target) return false
        }
        this.unBingBodyClick()
        this.toggle()
      }
    },
    unBingBodyClick() {
      this.body.onmouseup = function() {}
    },
    getAllEl(el, bool) {
      const elArr = []
      if (bool) elArr.push(el)
      const child = el.children
      for (let i = 0; i < child.length; i++) {
        elArr.push(child[i])
        if (child[i].children.length) elArr.push(...this.getAllEl(child[i]))
      }
      return elArr
    }
  }
}
</script>
<style lang="scss" scoped>
@import '~@/styles/mixin';
.select-box-container{
  display: inline-block;
  position: relative;
  border: 1px solid transparent;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom: none;
  transition: box-shadow .2s;
  @include clearfix();
  .select-box-arrow{
    margin-top: 20px;
    float: left;
    width: 40px;
    text-align: center;
    line-height: 40px;
    color: #999;
    cursor: pointer;
    font-size: 18px;
    transition: transform .2s;
    &:hover{
      color: #409EFF;
    }
  }
  .select-box-content{
    padding: 20px;
    padding-left: 10px;
    padding-bottom: 0;
    float: left;
    width: calc(100% - 40px);
  }
  .select-box-extend{
    z-index: 10;
    background-color: #fff;
    position: absolute;
    top: 80px;
    left: 0;
    margin-left: -1px;
    padding-left: 40px + 10px;
    padding-right: 20px;
    padding-bottom: 20px;
    float: left;
    width: calc(100% + 2px);
    border: 1px solid transparent;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top: none;
    display: none;
    transition: box-shadow .2s;
  }
  &.extend{
    border-color: #ddd;
    box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
    .select-box-arrow{
      transform: rotate(-180deg);
    }
    &:hover{
      box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.3);
      .select-box-extend{
        box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.3);
      }
    }
    .select-box-extend{
      border-color: #ddd;
      display: block;
      box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
    }
  }
}
</style>
